<!--
 * @Author: 橘子
 * @Date: 2022-11-20 12:11:31
 * @Project_description: 头像
 * @Description: 代码是我抄的，不会也是真的
-->
<template>
  <div class='pages'>
    <el-image :preview-src-list='[imgUrl]' :src='imgUrl' :style='`width: ${width}; height: ${height}`' fit='cover'>
      <div
        slot='error'
        class='image-slot'
        style='
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid #c1c1c1;
        '>
        <i class='el-icon-picture-outline'></i>
      </div>
    </el-image>
  </div>
</template>

<script>
import setting from '@/setting'

export default {
  name: 'y-image',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    // 值
    value: {
      type: String,
      required: false,
      default: '',
    },
    width: {
      type: String,
      default: '60px',
    },
    height: {
      type: String,
      default: '60px',
    },
  },
  data() {
    // 这里存放数据
    return {
      imgUrl: '',
    }
  },
  created() {
    this.imgUrl = this.handleUrl(this.value)
  },
  watch: {
    value: {
      handler: function(o, n) {
        this.imgUrl = this.handleUrl(o)
      },
    },
  },
  methods: {
    //处理当前url是否带有http或者https
    handleUrl(url) {
      if (url.indexOf('http') == -1) {
        return setting.appInfo.imgUrl + url
      } else {
        return url
      }
    },
  },
}
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>
